import { Transfer, Tree } from 'antd';
import type { TransferDirection, TransferItem } from 'antd/es/transfer';
import type { DataNode } from 'antd/es/tree';

interface TreeTransferProps {
    dataSource: DataNode[];
    targetKeys: string[];
    onChange: (targetKeys: string[], direction: TransferDirection, moveKeys: string[]) => void;
}

// Customize Table Transfer
const isChecked = (selectedKeys: (string | number)[], eventKey: string | number) =>
    selectedKeys.includes(eventKey);

const generateTree = (treeNodes: DataNode[] = [], checkedKeys: string[] = []): DataNode[] =>
    treeNodes.map(({ children, ...props }) => ({
        ...props,
        disabled: checkedKeys.includes(props.key as string),
        children: generateTree(children, checkedKeys),
    }));

const onScroll = (direction: TransferDirection, e: React.SyntheticEvent<HTMLUListElement>) => {
    console.log('direction:', direction);
    console.log('target:', e.target);
};

const CustomTransfer = ({ dataSource, targetKeys, ...restProps }: TreeTransferProps) => {
    const transferDataSource: TransferItem[] = [];
    function flatten(list: DataNode[] = []) {
        list.forEach(item => {
            transferDataSource.push(item as TransferItem);
            flatten(item.children);
        });
    }
    flatten(dataSource);

    // @ts-ignore
    return (
        <Transfer
            {...restProps}
            titles={['选择分类', '被选分类']}
            targetKeys={targetKeys}
            dataSource={transferDataSource}
            className="tree-transfer"
            render={item => item.title!}
            showSelectAll={false}
            onScroll={onScroll}
            listStyle={{
                height:300
            }}
        >
            {({ direction, onItemSelect, selectedKeys }) => {
                if (direction === 'left') {
                    const checkedKeys = [...selectedKeys, ...targetKeys];
                    return (
                        <Tree
                            blockNode
                            checkable
                            checkStrictly
                            defaultExpandAll = {true}
                            checkedKeys={checkedKeys}
                            height={300}
                            treeData={generateTree(dataSource, targetKeys)}
                            onCheck={(_, { node: { key } }) => {
                                onItemSelect(key as string, !isChecked(checkedKeys, key));
                            }}
                            onSelect={(_, { node: { key } }) => {
                                onItemSelect(key as string, !isChecked(checkedKeys, key));
                            }}
                        />
                    );
                }
            }}
        </Transfer>
    );
};

export default CustomTransfer;